﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Template</title>
    <script type="text/javascript" src="../lib/jquery-1.4.4.js"></script>
    <script type="text/javascript" src="../lib/dumpobj.js"></script>
    <script type="text/javascript" src="../lib/jQXB.1.2.js"></script>
</head>
<body>
    <h1>
        Template Events example</h1>
    <h2>
        Change data</h2>
    <table>
        <thead>
            <tr>
                <th>
                    Prefix
                </th>
                <th>
                    Number
                </th>
            </tr>
        </thead>
        <tbody jqxb-templatecontainer="addressTemplate" jqxb-datasource="mydataDetails">
            <tr jqxb-template="addressTemplate" jqxb-templateitemidprfx="addressrow" style="display: none;">
                <td>
                    <table>
                        <tr>
                            <td>
                                <input type="text" jqxb-itemdatamember="prefix" />
                            </td>
                            <td>
                                <input type="text" jqxb-itemdatamember="number" />
                            </td>
                            <td>
                                <input type="text" class="rowsummary" />
                            </td>
                            <td>
                                <a href="#" class="onSelect">Click To See Data</a>
                            </td>
                        </tr>
                    </table>
                </td>
                <td jqxb-injecttemplate="tplNested" jqxb-datasourcemember="connections">
                    
                </td>
            </tr>
        </tbody>
    </table>
       <table jqxb-childtemplate="tplNested">
        <thead>
            <tr>
                <th>
                    Name
                </th>
            </tr>
        </thead>
        <tbody jqxb-templatecontainer="tplNested" >
            <tr jqxb-template="tplNested" jqxb-templateitemidprfx="addressrow" style="display: none;">
                <td>
                    <table>
                        <tr>
                            <td>
                                <input type="text" jqxb-itemdatamember="name" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
    <div>
        <textarea jqxb-datasource="mydataDump" jqxb-datamember="object" cols="100" rows="20"></textarea>
    </div>
    <script type="text/javascript">
        var Customer = { 'Name': 'Anthony',
            'Surname': 'Murray',
            'Address': { 'Street': 'Carnaby Street', 'ZipCode': 'YTSCH', 'Phones': [{ 'prefix': 010, 'number': 23094895, 'connections': [{ 'name': "ADSL" }, { 'name': "3G"}] }, { 'prefix': 0185, 'number': 2930940, 'connections': [{ 'name': "ADSL" }, { 'name': "3G"}] }, { 'prefix': 03485, 'number': 3234567, 'connections': [{ 'name': "ADSL" }, { 'name': "3G"}]}] },
            'MonthlyAmount': [13498, 23456, 12345, 12345, 38728, 0, 34231, 39748.95, 34534, 2134, 567, 666, 345]
        };
        var dataDump = new Object();
        dataDump.object = dumpObj(Customer, 'Customer', "- ", 1);
        jQXB.setDataSource('mydataDump', dataDump).doBind('mydataDump');
        // Common jQuery entry point
        jQuery(document).ready(function () {
            // Initialize the System
            jQXB.initialize();
            // Attach template Event Handling, it should be declared before binding 
            jQXB.addOnTemplateItemBoundhnd(function (dataSorceName, templateName, occurrency, dataItem, jQrytemplateItem) {
                switch (templateName) {
                    case "addressTemplate": // filter only event databound from a specifica template
                        var jQryElem = jQrytemplateItem.find('.rowsummary');
                        var jQryBtn = jQrytemplateItem.find('.onSelect');
                        jQryElem.val(' the row  ' + occurrency + ' has been created in template \'' + templateName + '\', values : ' + dataItem.prefix + ' and ' + dataItem.number);
                        // prevent events fires twice in case of re-binding
                        jQryBtn.unbind();
                        jQryBtn.bind('click', function () {
                            alert('Row ' + occurrency + ' selected , calling ' + dataItem.prefix + '-' + dataItem.number);
                        });
                        break;
                }
            });

            // Create a new DataSource for template ( data are shared between the two datasource )
            jQXB.setDataSource('mydataDetails', Customer.Address.Phones).doBind('mydataDetails');
            // Attach Events for display data changes
            jQXB.addOnAfterUpdatehnd(function (datasourceName) {
                switch (datasourceName) {
                    case "mydataDetails":
                        var dataDump = new Object();
                        dataDump.object = dumpObj(Customer, 'Customer', "- ", 1);
                        jQXB.setDataSource('mydataDump', dataDump).doBind('mydataDump');
                        break;
                }
            });

        });

    </script>
</body>
</html>
